<template>
  <el-dialog
    title="栏目权限配置"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
  >
    <el-form label-width="0px">
      <el-form-item label="" class="dataJurisdiction_tree">
        <el-tree
          :data="webMenu"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :expand-on-click-node="false"
          highlight-current
          :default-expand-all="false"
          :check-strictly="isStrictly"
          ref="tree"
          accordion
          :default-checked-keys="checkedIds"
          :default-expanded-keys="loadIds"
          v-if="dialogVisible"
        >
          <span class="custom-tree-node" slot-scope="{ data }">
            <span>{{ data.name }}</span>
          </span>
        </el-tree>
      </el-form-item>
    </el-form>
    <el-alert
      title="请先配置该用户或角色的菜单权限"
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="warning"
        v-preventReClick
        v-if="authorType == 2"
        @click="handleClear()"
        >清 空</el-button
      >
      <el-button type="primary" v-preventReClick @click="handleSubmit()"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { concat } from 'lodash'
export default {
  data() {
    return {
      dialogVisible: false,
      webMenu: [],
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      checkedIds: [], //默认选中的菜单ID
      loadIds: [], //默认展开的菜单ID
      isStrictly: false, //父子不互相关联 默认为 false
      rowId: '',
    }
  },
  // authorType 授权类型1-用户，2-角色
  props: ['authorType'],
  mounted() {
    this.$bus.$on('showDialogColumnPermission', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogColumnPermission')
  },
  methods: {
    init(row) {
      this.checkedIds = []
      this.rowId = row.id
      this.isStrictly = true
      this.getWebColumn()
      this.dialogVisible = true
      setTimeout(() => {
        this.isStrictly = false
      }, 1000)
    },
    //获取所有栏目
    async getWebColumn() {
      let res = await this.$store.dispatch('queryWebColumn', { classType: 1 })
      this.webMenu = res.data
      this.authorType == 1 ? this.getColumnByUserId() : this.getColumnByRoleId()
    },
    //获取该用户拥有的栏目权限
    async getColumnByUserId() {
      let res = await this.$store.dispatch(
        'querySysRoleColumnGetAll',
        this.rowId,
      )
      this.checkedIds = res.data[0]
    },
    //获取该角色拥有的栏目权限
    async getColumnByRoleId() {
      let res = await this.$store.dispatch(
        'querySysRoleColumnGetRoleColumn',
        this.rowId,
      )
      this.checkedIds = res.data.map((v) => v.columnId)
    },
    //提交
    async handleSubmit() {
      let checkedArr = this.$refs.tree.getCheckedKeys()
      let halfCheckedArr = this.$refs.tree
        .getHalfCheckedNodes()
        .map((v) => v.id)
      let obj = {
        authorIds: [this.rowId],
        authorType: this.authorType || 1,
        columnIds: concat(checkedArr, halfCheckedArr),
      }
      // addSysRoleColumn
      // updateSysRoleColumn
      await this.$store.dispatch('updateSysRoleColumn', obj)
      this.successMsg('操作成功')
      this.dialogVisible = false
    },
    async handleClear() {
      let obj = {
        authorIds: [this.rowId],
        authorType: this.authorType || 1,
      }
      await this.$store.dispatch('clearAllSysRoleColumn', obj)
      this.successMsg('操作成功')
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="scss">
.dataJurisdiction_tree .el-tree {
  height: 450px;
  overflow-y: auto;
  // border: 1px solid #dcdfe6;
}
</style>